<!--
 * @Author: Wushiqi
 * @Descripttion: 页面操作按钮组件
 * @Date: 2020-06-28 17:28:55
 * @LastEditTime: 2021-04-28 17:40:51
-->
<template>
  <div>
    <el-button
      v-for="item in btnList"
      :key="item.menuId"
      :disabled="disabled"
      class="operation-button"
      :icon="item.iconcls"
      type="primary"
      plain
      @click="handleClickBtn(item.componentName)"
      @mouseover.native="mouseenter(item.componentName)"
    >
      <span v-if="item.menuName.split('_').length > 1">{{ item.menuName.split('_')[1] }}</span>
      <span v-else>{{ item.menuName }}</span>
    </el-button>
  </div>
</template>

<script>
/**
 * 使用方法：
  <operation-btn :btn-list="btnList" @handleClickBtn="handleClickBtn" />
  btnList来自：btnList() { return common.getBtn(this.$route.path) }
  handleClickBtn：按钮点击事件
 */
export default {
  name: 'OperationBtn',
  props: {
    btnList: {
      type: Array,
      default: () => []
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleClickBtn: function(data) {
      const res = data.split('/')
      this.$emit('handleClickBtn', res[res.length - 1])
    },
    mouseenter: function(val) {
      const res = val.split('/')
      const componentName = res[res.length - 1]
      this.$emit('handleHover', componentName)
    }
  }
}
</script>

<style lang="scss" scoped>
.operation-button {
  width: auto;
  margin-right: 10px;
  line-height: 16px;
  font-size: 14px;
  padding: 7px 9px;
}
</style>
